<template>
    <div class="send-entry">
        <!-- 顶部 -->
        <header class="header">
            <div class="header-left" @click="close">
                <svg t="1636967984835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7230" width="200" height="200"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="7231"></path></svg>
            </div>
            <div class="header-mid" >
                <p>创建词条</p>
                <div>
                    <span ref="preview" @click="toPreview">预览</span>
                    <span ref="send" @click="sendEntry">发布</span>
                </div>
            </div>
        </header>
        <!-- 内容发布 -->
        <div class="content">
            <div class="tit">
                <input type="text" placeholder="词条标题" v-model="titV">
                <span>{{titLen}}/32</span>
            </div>
            <div class="text">
                <textarea v-model="conV" cols="30" rows="10" :placeholder="placeholder">
                </textarea>
            </div>
            <div class="bot-box">
                <div class="anonymous">
                    <input type="checkbox"><span>匿名</span>
                </div>
                <div class="counting">
                    <p>{{conLen}}/256</p>
                    <p>已保存</p>
                </div>
            </div>
            <div class="img-li">
                <div class="img-box" v-for="item in entryObj.imgArr" :key="item.id">
                    <img :src="item.urlStr" alt="">
                    <div class="cancel" @click="cancelImg(item.id)">
                        <svg t="1637049694685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2463" width="200" height="200"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2464" fill="#ffffff"></path></svg>
                    </div>
                </div>
                <div class="img-box" v-show="imgCount==9?false:true">
                    <div class="upload">
                        <input type="file" name="" id="" @change="uploadImg($event)">
                        <div>
                            <svg t="1636973694167" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8811" width="200" height="200"><path d="M910.2 113.8H113.8C51.2 113.8 0 165 0 227.6v568.9C0 859 51.2 910.2 113.8 910.2h796.4c62.6 0 113.8-51.2 113.8-113.8V227.6c0-62.6-51.2-113.8-113.8-113.8z m-796.4 56.9h796.4c31.4 0 56.9 25.5 56.9 56.9v471.8L768 500.2 583.1 685.1 257 359 56.9 559.2V227.6c0-31.4 25.5-56.9 56.9-56.9zM56.9 796.4V639.6L257 439.4l413.9 413.9H113.8c-31.4 0-56.9-25.5-56.9-56.9z m853.3 56.9H751.3l-128-128L768 580.7l199.1 199.1v16.7c0 31.3-25.5 56.8-56.9 56.8z" p-id="8812" fill="#8a8a8a"></path><path d="M682.7 455.1c62.8 0 113.8-50.9 113.8-113.8s-50.9-113.8-113.8-113.8-113.8 50.9-113.8 113.8 50.9 113.8 113.8 113.8z m0-170.7c31.4 0 56.9 25.5 56.9 56.9s-25.5 56.9-56.9 56.9-56.9-25.5-56.9-56.9 25.5-56.9 56.9-56.9z" p-id="8813" fill="#8a8a8a"></path></svg>
                            <p>添加图片</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapMutations} from "vuex"
export default {
    name:"SendEntry",
    data(){
        return{
            placeholder:`词条内容\n\n建议包含以下信息\n1.释义:在开头进行通俗易懂的释义\n2.起源:对词语起源进行适当的考据\n3.举例:举出一两个词语使用的实例\n\n注意:小鸡词典更欢迎你的原创解释，如有引用请注明出处哦~`,
            titV:"",
            conV:"",
            entryObj:{
                id:"",
                title:"",
                keyword:"",
                content:"",
                time:"",
                imgArr:[],
                writer:"",
                browse:"1",
                collectCount:"",
                commentCount:"",
                likeCount:"",
                isLiked:false,
                isCollected:false
            }
        }
    },
    computed:{
        ...mapState(["fromPagePath","entry","user"]),
        titLen(){
            return this.titV.length;
        },
        conLen(){
            return this.conV.length;
        },
        imgCount(){
            return this.entryObj.imgArr.length;
        }
    },
    created(){
        if(this.entry.entryCreation.title==undefined || this.entry.entryCreation.content==undefined || this.entry.entryCreation.imgArr==undefined){
            return;
        }else{
            this.titV = this.entry.entryCreation.title;
            this.conV = this.entry.entryCreation.content.join("\n");
            this.entryObj = this.entry.entryCreation;
        }
    },
    watch:{
        titLen(newV){
            this.$nextTick(()=>{
                if(newV>0){
                    this.$refs.preview.style["color"]="#000"
                    this.$refs.preview.style["pointerEvents"]="auto"
                    this.$refs.send.style["color"]="rgb(180,135,88)"
                    this.$refs.send.style["pointerEvents"]="auto";
                }
                if(newV==0&&this.titLen==0&&this.conLen==0){
                    this.$refs.preview.style["color"]="rgb(180, 177, 177)"
                    this.$refs.preview.style["pointerEvents"]="none"
                    this.$refs.send.style["color"]="rgb(180, 177, 177)"
                    this.$refs.send.style["pointerEvents"]="none"
                }
            })
        },
        conLen(newV){
            this.$nextTick(()=>{
                if(newV>0){
                    this.$refs.preview.style["color"]="#000"
                    this.$refs.preview.style["pointerEvents"]="auto"
                    this.$refs.send.style["color"]="rgb(180,135,88)"
                    this.$refs.send.style["pointerEvents"]="auto";
                }
                if(newV==0&&this.titLen==0&&this.conLen==0){
                    this.$refs.preview.style["color"]="rgb(180, 177, 177)"
                    this.$refs.preview.style["pointerEvents"]="none"
                    this.$refs.send.style["color"]="rgb(180, 177, 177)"
                    this.$refs.send.style["pointerEvents"]="none"
                }
            })
        },
        imgCount(newV){
            this.$nextTick(()=>{
                if(newV>0){
                    this.$refs.preview.style["color"]="#000"
                    this.$refs.preview.style["pointerEvents"]="auto"
                    this.$refs.send.style["color"]="rgb(180,135,88)"
                    this.$refs.send.style["pointerEvents"]="auto";
                }
                if(newV==0&&this.titLen==0&&this.conLen==0){
                    this.$refs.preview.style["color"]="rgb(180, 177, 177)"
                    this.$refs.preview.style["pointerEvents"]="none"
                    this.$refs.send.style["color"]="rgb(180, 177, 177)"
                    this.$refs.send.style["pointerEvents"]="none"
                }
            })
        }
    },
    methods:{
        ...mapMutations(["addCreation","setshowChoiceFlag"]),
        close(){
            this.$router.push({path:this.fromPagePath});
            // 清空词条的缓存内容
            this.$store.commit("entry/clearEntryCreated");
        },
        toPreview(){
            this.saveEntry();
            this.$router.push({path:"/preview"});
        },
        // 保存用户输入的词条数据
        saveEntry(){
            this.entryObj.title=this.titV;
            this.entryObj.keyword=this.titV;
            this.conV = this.conV.split("\n")
            this.entryObj.content =this.conV;
            this.entryObj.time = this.entry.entryCreateTime;
            this.$store.commit("entry/saveEntry",this.entryObj);
        },
        // 图片上传
        uploadImg(event) {
            // 读取图片信息
            let imgInfo = event.target.files[0];
            // 创建读取文件对象的实例
            let fileReader = new FileReader();
            // 加载文件
            fileReader.onload = (data) => {
                // 获取表示图片的base64格式字符串（图片）
                let urlStr = data.target.result;
                let imgObj={
                    id:new Date().getTime(),
                    urlStr
                }
                this.addImgArr(imgObj);
            };
            // 读取图片文件信息
            fileReader.readAsDataURL(imgInfo);
        },
        // 添加图片
        addImgArr(obj){
            if(this.entryObj.imgArr.length==0){
                this.entryObj.imgArr.unshift(obj);
                return;
            }
            for (let index = 0; index < this.entryObj.imgArr.length; index++) {
                if(this.entryObj.imgArr[index].urlStr == obj.urlStr){
                    return;
                }
            }
            this.entryObj.imgArr.unshift(obj);
        },
        // 删除图片
        cancelImg(id){
            for (let index = 0; index < this.entryObj.imgArr.length; index++) {
                if(this.entryObj.imgArr[index].id == id){
                    this.entryObj.imgArr.splice(index,1);
                    return;
                }
            }
        },
        // 发布词条
        sendEntry(){
            // 修改词条内容
            if(this.entryObj.id) {
                // 保存修改后的词条内容
                this.saveEntry();
                this.$store.commit("entry/editEntry");
                this.$router.push({path:"/editSuccess"});
                this.setshowChoiceFlag(false);
            }else{ //添加词条
                // 设置词条的用户信息
                this.entryObj.writer=this.user.avatar.nickname;
                this.entryObj.id = new Date().getTime();
                // 保存词条数据
                this.saveEntry();
                // 添加词条到data数组
                this.addCreation(this.entryObj);
                this.$store.commit("entry/addCreationToData",this.entryObj);
                // 清空词条的缓存内容
                this.$store.commit("entry/clearEntryCreated");
                this.$router.push({path:"/sendSuccess"});
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 20px ; 
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    .header-left{
        svg{
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }
    }
    .header-mid{
        display: flex;
        align-items: center;
        p{
            font-size: 16px;
            text-align: center;
            font-weight: bold;
        }
        >div{
            margin-left: 50px;
            display: flex;
            align-items: center;
            span{
                font-size: 15px;
                margin-left: 10px;
                color: rgb(180, 177, 177);
                pointer-events: none;
            }
        }
    }
}
.content{
    padding: 0 15px;
    .tit{
        width: 100%;
        position: relative;
        input{
            width: 100%;
            border-bottom: 1px solid #ccc;
            height: 50px;
            font-size: 18px;
            font-weight: bold;
            &::placeholder{
                font-size: 18px;
                color: rgb(156, 155, 155);
                font-weight: bold;
            }
        }
        span{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            font-size: 14px;
            color: #999;
        }
    }
    .text{
        width: 100%;
        margin-top: 5px;
        textarea{
            width: 100%;
            height: 180px;
            border: 0;
            resize: none;
            outline: none;
            font-size: 14px;
            position: relative;
            &::placeholder{
                color:rgb(117, 117, 117);
                font-size: 16px;
            }
        }
    }
    .bot-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .anonymous{
            padding-bottom: 10px;
           span{
                font-size: 14px;
                color: $moreCol;
                font-weight: bold;
                vertical-align: middle;
           }
            input[type="checkbox"]{
                width: 16px;
                height: 16px;
                vertical-align: middle;
                margin-right: 10px;
            }
        }
        .counting{
            font-size: 12px;
            color: rgb(168, 167, 167);
        }
    }
    .upload{
        width: 100%;
        height: 100%;
        border: 1px solid rgb(182, 182, 182);
        text-align: center;
        position: relative;
        input[type="file"]{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
        }
        >div{
            width: 100%;
            height: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .icon{
            width: 40px;
            height: 40px;
        }
        p{
            margin: -10px;
            font-size: 14px;
            color: #999;
        }
    }
    .img-li{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-items: flex-start;
        .img-box{
            width: 100px;
            height: 100px;
            flex-shrink:0 ;
            border: 1px solid rgb(240, 240, 240);
            display: flex;
            align-items: center;
            position: relative;
            margin: 0 6px;
            img{
                width: 100%;
            }
            .cancel{
                width: 20px;
                height: 20px;
                background-color: rgba($color: #000000, $alpha: .5);
                position: absolute;
                top: 5px;
                right: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                .icon{
                    width: 18px;
                    height: 18px;
                }
            }

        }
    }

}
</style>